<template>
	<view>
		<view class="eval-title">维修已完成</view>
		<view class="eval-subtitle">请评价一下您对本次维修的感受吧!</view>
		<view class="eval-line"></view>
		<view class="eval-subtitle">评价维修人员</view>
		<view class="eval-rate">
			<u-rate :count="5" v-model="value" size="56"></u-rate>
		</view>
		<view class="baoCheckall">
			<block v-for="(item,index) in advice" :key="index">
				<view class="baoSelected" :data-index="index" @tap="checkAdvice" v-if="item.checked">{{item.name}}</view>
				<view class="baoNoselect" :data-index="index" @tap="checkAdvice" v-else>{{item.name}}</view>
			</block>
		</view>
		<view class="baoContent">
			<view class="eval-kuang">
				<view class="eval-kuanginput">
					<textarea v-model="evaluate" maxlength="200" placeholder="请填写其它评价..." placeholder-style="color:#5499FF;font-size:28upx;" style="padding-top: 30upx;"/>
				</view>
			</view>
			<view class="baoBt" @tap="tapping">评  价</view>
		</view>
	</view>
</template>

<script>
	// import uniRate from '@/common/uni-rate/uni-rate.vue'
	export default {
		data() {
			return {
				advice:[],
				score:1,
				evaluate:"",
				label:"",
				eval_id:"",
				value:4
			}
		},
		components:{
		    // uniRate
		},
		onLoad(options){
			this.eval_id=options.id;
		},
		onShow(){
			this.$api.label({}).then(res=>{
				this.advice=res.data;
			})
		},
		methods: {
			taprate(e){
				this.score=e.value;
			},
			checkAdvice(e){
				let label="";
				this.advice.map((item,index)=>{
					if(index==e.currentTarget.dataset.index){
						item.checked=!item.checked
					}
					if(item.checked){
						if(label){
							label+=","+item.id
						}else{
							label+=item.id
						}
					}
				})
				this.label=label;
			},
			tapping(){
				let parse={
					id:this.eval_id,
					score:this.score,
					praise:this.evaluate,
					label_ids:this.label
				}
				this.$api.pingjia(parse).then(res=>{
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000);
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				})
			}
		}
	}
</script>

<style>
	.baoContent{
		margin: 0 30upx;
	}
	/* 选中框和未选中框 */
	.baoCheckall{
		display: flex;
		flex-wrap: wrap;
	}
	.baoSelected{
		height:56upx;
		background-color:#5499FF;
		text-align: center;
		line-height: 56upx;
		color:#fff;
		border-radius: 28upx;
		margin:0 0 30upx 30upx;
		padding:0 36upx;
	}
	.baoBt{
		margin: 0;
		background:linear-gradient(to right, rgb(78, 146, 252), rgb(77, 146, 240));
		box-shadow:0 6upx 10upx 0 rgba(84,153,255,0.6);
		width: 100%;
		height: 98upx;
		line-height: 98upx;
		text-align:center;
		border-radius:49upx;
		color: #fff;
		letter-spacing: 2upx;
		font-size: 36upx;
		letter-spacing: 8upx;
		font-weight: bold;
	}
	.baoNoselect{
		height:56upx;
		background-color:#EEF5FF;
		text-align: center;
		line-height: 56upx;
		color:#5499FF;
		border-radius: 28upx;
		margin:0 0 30upx 30upx;
		padding:0 36upx;
	}
	.eval-title{
		margin-top: 90upx;
		text-align: center;
		font-size: 46upx;
		font-weight: bold;
	}
	.eval-subtitle{
		margin-top: 28upx;
		text-align: center;
		font-weight: bold;
		color: #999;
	}
	.eval-line{
		width:500upx;
		height:1upx;
		background:rgba(239,239,239,1);
		margin:0 auto;
		margin-top: 30upx;
	}
	.eval-rate{
		display: flex;
		justify-content: center;
		margin-top: 30upx;
		margin-bottom: 30upx;
	}
	.eval-kuang{
		width: 100%;
		background:#EEF5FF;
		border-radius:10upx;
		margin-bottom: 90upx;
	}
	.eval-kuanginput{
		padding:30upx;
		padding-top: 0;
	}
</style>
